<template>
  <div class="nav-bar" :class="{'flexd':isflexd}">
    <div class="container">
      <div class="left">
        <span class="title">{{productList.title}}</span>
        <span v-for="(item,index) in productList.brother" :key="index">{{item}}</span>
      </div>
      <div class="right">
        <span>概述页</span>
        <span>参数页</span>
        <span class="noborder">用户评价</span>
        <slot name="button"></slot>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'productHeader',
  data() {
    return {
      // 控制navbar是否实现吸顶功能
      isflexd: false
    }
  },
  mounted() {
    // 当dom结构挂载完毕监听浏览器的滚动事件 并且触发methods中的函数
    window.addEventListener('scroll', this.changeFlexd)
    this.getProduct()
  },
  methods: {
    changeFlexd() {
      const scollTop = window.pageYOffset
      scollTop > 139 ? (this.isflexd = true) : (this.isflexd = false)
    },
    // 异步派发仓库中获取产品信息的事件
    async getProduct() {
      await this.$store.dispatch('getProductList', this.$route.params.id)
    }
  },
  computed: {
    ...mapState(['productList'])
  }
}
</script>

<style lang='scss'>
.flexd {
  position: fixed;
  top: 0;
  left: 0;
}
.nav-bar {
  width: 100%;
  height: 63px;
  border-top: 1px solid #ccc;
  box-shadow: 0 2px 2px #ccc;
  z-index: 15;
  background-color: #fff;
  transition: all 0.3s;
  .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    span {
      padding: 0 16px;
      border-right: 1px solid black;
      color: #666;
    }
    .noborder {
      border: none;
    }
    .left {
      .title {
        font-size: 16px;
        font-weight: 550;
        color: black;
      }
      span:last-child {
        border: 0;
      }
    }
    .right {
      span {
        font-size: 14px;
      }
      .goBuy {
        display: inline-block;
        width: 120px;
        height: 30px;
        background-color: #ff6600;
        vertical-align: middle;
        text-align: center;
        line-height: 30px;
        color: #fff;
      }
    }
  }
}
</style>
